<template>
  <view @touchmove.stop.prevent="stop">
    <view class="tui-bottom-popup" :class="{'tui-popup-show': isShow}">
      <view class="tui-calendar-header" :class="{ 'tui-calendar-radius': radius }">
        <view style="opacity: 0">
          <!-- #ifndef APP-NVUE-->
          <text class="tbb-guanbi1 text-32 color-t3" />
          <!-- #endif-->
          <!--  #ifdef APP-NVUE  -->
          <text class="iconfont text-32 color-t3">&#xe61e;</text>
          <!-- #endif-->
        </view>
        <text class="text-30 color-t1">日期选择</text>
        <view hover-class="tui-opacity" :hover-stay-time="150" @tap="hide">
          <!-- #ifndef APP-NVUE-->
          <text class="tbb-guanbi1 text-32 color-t3" />
          <!-- #endif-->
          <!--  #ifdef APP-NVUE  -->
          <text class="iconfont text-32 color-t3">&#xe61e;</text>
          <!-- #endif-->
        </view>
      </view>

      <view class="tui-date-box">
        <text class="tui-date_time">{{ showTitle }}</text>
      </view>
      <view class="tui-date-header">
        <view class="tui-date">
          <text class="text-28 color-t1">日</text>
        </view>
        <view class="tui-date">
          <text class="text-28 color-t1">一</text>
        </view>
        <view class="tui-date">
          <text class="text-28 color-t1">二</text>
        </view>
        <view class="tui-date">
          <text class="text-28 color-t1">三</text>
        </view>
        <view class="tui-date">
          <text class="text-28 color-t1">四</text>
        </view>
        <view class="tui-date">
          <text class="text-28 color-t1">五</text>
        </view>
        <view class="tui-date">
          <text class="text-28 color-t1">六</text>
        </view>
      </view>
      <swiper class="width-full" :current="inx" :style="{ height: isFixed && fixedHeight ? '642rpx' : 'auto' }" @change="swiperChangeMonth">
        <swiper-item v-for="(val,key) in swiper" :key="key">
          <view class="tui-date-content" :class="{ 'tui-flex-start': isFixed && fixedHeight }">
            <view class="tui-bg-month flex-row flex-center">
              <text style="font-size: 260rpx;color: #f5f5f7;">{{ val.month }}</text>
            </view>
            <block v-for="(item, index) in val.weekdayArr" :key="index"><view class="tui-date" /></block>
            <view
              v-for="(item, index) in val.daysArr"
              :key="index"
              class="tui-date"
              :class="{
                'tui-date-pd_0': isFixed && fixedHeight,
                'tui-opacity': openDisAbled(val.year, val.month, index + 1),
                'tui-start-date': (type == 2 && startDate == `${val.year}-${val.month}-${index + 1}`) || type == 1,
                'tui-end-date': (type == 2 && endDate == `${val.year}-${val.month}-${index + 1}`) || type == 1
              }"
              :style="{ backgroundColor: isFixed ? getColor(index, 1,val) : 'transparent', height: isFixed && fixedHeight ? dateHeight + 'px' : 'auto' }"
              @click.stop="dateClick(index,val)"
            >
              <view class="tui-date-text" :style="{ backgroundColor: getStatusData(2, index) }">
                <text v-if="isFixed || !getStatusData(4, index)" class="text-32" :style="{color: isFixed ? getColor(index, 2,val) : getStatusData(3, index)}">{{ index + 1 }}</text>
                <view v-if="!getStatusData(4, index)" class="tui-custom-desc" :class="{ 'tui-lunar-unshow': !lunar && isFixed }">
                  <text class="text-24" :style="{color: isFixed ? getColor(index, 2,val) : getStatusData(3, index)}">{{ getDescText(index, startDate, endDate) }}</text>
                </view>
                <text v-if="getStatusData(4, index)" class="tui-iconfont tui-font-check" />
              </view>
              <view v-if="!lunar && type == 2 && startDate == `${val.year}-${val.month}-${index + 1}` && startDate != endDate" class="tui-date-desc flex-row flex-center" :style="{ color: activeColor }">
                <text class="text-24" :style="{color: isFixed ? getColor(index, 2,val) : getStatusData(3, index)}">{{ startText }}</text>
              </view>
              <view v-if="!lunar && type == 2 && endDate == `${val.year}-${val.month}-${index + 1}`" class="tui-date-desc flex-row flex-center" :style="{ color: activeColor }">
                <text class="text-24" :style="{color: isFixed ? getColor(index, 2,val) : getStatusData(3, index)}">{{ endText }}</text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <view class="tui-calendar-op">
        <view class="tui-calendar-result flex-row justify-center">
          <text class="text-24 color-t2">{{ type == 1 ? activeDate : startDate }}</text>
          <text v-if="endDate" class="text-24 color-t2">至{{ endDate }}</text>
        </view>
        <tui-button @click="btnFix(false)">确定</tui-button>
      </view>
    </view>
    <!-- #ifndef APP-NVUE -->
    <view class="tui-popup-mask" :class="[isShow ? 'tui-mask-show' : '']" @tap="hide" />
    <!-- #endif -->
  </view>
</template>
<script>
// easycom组件模式 无需手动引入
// import tuiButton from "../tui-button/tui-button"
const calendar = require('./tui-calendar.js')
import { mapGetters, mapMutations } from 'vuex'
import { copyData } from '@/common/util'
import colors from '@/common/colors'
export default {
  name: 'TuiCalendar',
  // components:{
  // 	tuiButton
  // },
  props: {
    // 1-切换月份和年份 2-切换月份
    arrowType: {
      type: [Number, String],
      default: 1
    },
    // 1-单个日期选择 2-开始日期+结束日期选择
    type: {
      type: Number,
      default: 2
    },
    // 可切换最大年份
    maxYear: {
      type: Number,
      default: 2030
    },
    // 可切换最小年份
    minYear: {
      type: Number,
      default: 1920
    },
    // 最小可选日期(不在范围内日期禁用不可选)
    minDate: {
      type: String,
      default: '1920-01-01'
    },
    /**
		 * 最大可选日期
		 * 默认最大值为今天，之后的日期不可选
		 * 2030-12-31
		 * */
    maxDate: {
      type: String,
      default: ''
    },
    // 显示圆角
    radius: {
      type: Boolean,
      default: true
    },
    // 状态 数据顺序与当月天数一致，index=>day
    /**
				 * [{
					 * text:"", 描述：2字以内
					 * value:"",状态值
					 * bgColor:"",背景色
					 * color:""  文字颜色,
					 * check:false //是否显示对勾
					 *
				 }]
				 *
				 * **/
    status: {
      type: Array,
      default() {
        return []
      }
    },
    // 月份切换箭头颜色
    monthArrowColor: {
      type: String,
      default: '#999'
    },
    // 年份切换箭头颜色
    yearArrowColor: {
      type: String,
      default: '#bcbcbc'
    },
    // 默认日期字体颜色
    color: {
      type: String,
      default: '#333'
    },
    // 选中|起始结束日期背景色
    activeBgColor: {
      type: String,
      default: colors.colorPrimary
    },
    // 选中|起始结束日期字体颜色
    activeColor: {
      type: String,
      default: '#333'
    },
    // 范围内日期背景色
    rangeBgColor: {
      type: String,
      default: '#FBE8D1'
    },
    // 范围内日期字体颜色
    rangeColor: {
      type: String,
      default: '#333'
    },
    // type=2时生效，起始日期自定义文案
    startText: {
      type: String,
      default: '开始'
    },
    // type=2时生效，结束日期自定义文案
    endText: {
      type: String,
      default: '结束'
    },
    // 按钮样式类型
    btnType: {
      type: String,
      default: 'primary'
    },
    // 固定在底部
    isFixed: {
      type: Boolean,
      default: true
    },
    // 固定日历容器高度，isFixed=true时生效
    fixedHeight: {
      type: Boolean,
      default: true
    },
    // 当前选中日期带选中效果
    isActiveCurrent: {
      type: Boolean,
      default: true
    },
    // 切换年月是否触发事件 type=1时生效
    isChange: {
      type: Boolean,
      default: false
    },
    // 是否显示农历
    lunar: {
      type: Boolean,
      default: false
    },
    // 初始化起始选中日期 格式： 2020-06-06 或 2020/06/06 【type=1 or 2】
    initStartDate: {
      type: String,
      default: ''
    },
    // 初始化结束日期 格式： 2020-06-06 或 2020/06/06【type=2】
    initEndDate: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShow: false,
      weekday: 1, // 星期几,值为1-7
      weekdayArr: [],
      days: 0, // 当前月有多少天
      daysArr: [],
      showTitle: '',
      year: 2020,
      month: 0,
      day: 0,
      startYear: 0,
      startMonth: 0,
      startDay: 0,
      endYear: 0,
      endMonth: 0,
      endDay: 0,
      today: '',
      activeDate: '',
      startDate: '',
      endDate: '',
      isStart: true,
      min: null,
      max: null,
      dateHeight: 20,
      swiper: [],
      data: {},
      inx: 0
    }
  },
  computed: {
    dataChange() {
      return `${this.type}-${this.minDate}-${this.maxDate}-${this.initStartDate}-${this.initEndDate}`
    },
    ...mapGetters({
      statisticsCalendarShowInx: 'statisticsCalendarShowInx'
    })
  },
  watch: {
    dataChange(val) {
      this.init()
    },
    fixedHeight(val) {
      if (val) {
        this.initDateHeight()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    swiperChangeMonth(e) {
      const val = e.detail.current
      /* #ifdef APP-PLUS*/
      this.setStatisticsCalendarShowInx(val)
      /* #endif*/
      this.showTitle = `${this.swiper[val].year}年${this.swiper[val].month}月`
    },
    getColor(index, type, item) {
      let color = type == 1 ? 'transparent' : this.color
      const day = index + 1
      const date = `${item.year}-${item.month}-${day}`
      const timestamp = new Date(date.replace(/\-/g, '/')).getTime()
      const start = this.startDate.replace(/\-/g, '/')
      const end = this.endDate.replace(/\-/g, '/')
      if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
        color = type == 1 ? this.activeBgColor : this.activeColor
      } else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
        color = type == 1 ? this.rangeBgColor : this.rangeColor
      }
      return color
    },
    // 获取状态数据
    getStatusData(type, index) {
      // 1-描述text,2-bgColor背景色,3-color文字颜色 4-check 是否显示对勾
      let val = ['', 'transparent', '#333', ''][type - 1]
      if (!this.isFixed && this.status && this.status.length > 0) {
        const item = this.status[index]
        if (item) {
          switch (type) {
            case 1:
              val = item.text
              break
            case 2:
              val = item.bgColor
              break
            case 3:
              val = item.color
              break
            case 4:
              val = item.check
              break
            default:
              break
          }
        }
      }
      return val
    },
    getDescText(index, startDate, endDate) {
      let text = this.lunar ? this.getLunar(this.year, this.month, index + 1) : ''
      if (this.isFixed && this.type == 2) {
        // 此判断不能与上面条件一起判断
        if (this.lunar) {
          const date = `${this.year}-${this.month}-${index + 1}`
          if (startDate == date && startDate != endDate) {
            text = this.startText
          } else if (endDate == date) {
            text = this.endText
          }
        }
      } else {
        const status = this.getStatusData(1, index)
        if (status) text = status
      }
      return text
    },
    getLunar(year, month, day) {
      const obj = calendar.solar2lunar(year, month, day)
      return obj.IDayCn
    },
    initDateHeight() {
      if (this.fixedHeight && this.isFixed) {
        this.dateHeight = uni.upx2px(107)
      }
    },
    init() {
      this.swiper = []
      this.initDateHeight()
      const now = new Date()
      this.year = now.getFullYear()
      this.month = now.getMonth() + 1
      this.day = now.getDate()
      this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
      this.activeDate = this.today
      this.min = this.initDate(this.minDate)
      this.max = this.initDate(this.maxDate || this.today)
      this.startDate = ''
      this.startYear = 0
      this.startMonth = 0
      this.startDay = 0
      if (this.initStartDate) {
        const start = new Date(this.initStartDate.replace(/\-/g, '/'))
        if (this.type == 1) {
          this.year = start.getFullYear()
          this.month = start.getMonth() + 1
          this.day = start.getDate()
          this.activeDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`
        } else {
          this.startDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`
          this.startYear = start.getFullYear()
          this.startMonth = start.getMonth() + 1
          this.startDay = start.getDate()
          this.activeDate = ''
        }
      }
      this.endYear = 0
      this.endMonth = 0
      this.endDay = 0
      this.endDate = ''
      if (this.initEndDate && this.type == 2) {
        const end = new Date(this.initEndDate.replace(/\-/g, '/'))
        this.endDate = `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`
        this.endYear = end.getFullYear()
        this.endMonth = end.getMonth() + 1
        this.endDay = end.getDate()
        this.activeDate = ''
      }
      this.isStart = true
      this.data.year = this.year
      this.data.month = this.month
      this.showTitle = `${this.year}年${this.month}月`
      this.changeData()
      const year = new Date().getFullYear()
      const mounth = new Date().getMonth() + 1
      const num = (this.max.year - year) * 12 + (this.max.month - mounth)
      if (num) {
        for (let i = 0; i < num; i++) {
          this.changeMonth(1, i)
        }
      }
      for (let i = 0; i < 12; i++) {
        this.changeMonth(0, 0)
        this.inx = i + 1
      }
      /* #ifdef APP-PLUS*/
      if (this.statisticsCalendarShowInx !== null) {
        this.inx = this.statisticsCalendarShowInx
        this.showTitle = `${this.swiper[this.inx].year}年${this.swiper[this.inx].month}月`
      }
      /* #endif*/
    },
    // 日期处理
    initDate(date) {
      const fdate = date.split('-')
      return {
        year: Number(fdate[0] || 1920),
        month: Number(fdate[1] || 1),
        day: Number(fdate[2] || 1)
      }
    },
    openDisAbled: function(year, month, day) {
      let bool = true
      const date = `${year}/${month}/${day}`
      // let today = this.today.replace(/\-/g, '/');
      const min = `${this.min.year}/${this.min.month}/${this.min.day}`
      const max = `${this.max.year}/${this.max.month}/${this.max.day}`
      const timestamp = new Date(date).getTime()
      if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
        bool = false
      }
      return bool
    },
    generateArray: function(start, end) {
      return Array.from(new Array(end + 1).keys()).slice(start)
    },
    formatNum: function(num) {
      return num < 10 ? '0' + num : num + ''
    },
    stop() {
      return false
    },
    // 一个月有多少天
    getMonthDay(year, month) {
      const days = new Date(year, month, 0).getDate()
      return days
    },
    getWeekday(year, month) {
      const date = new Date(`${year}/${month}/01 00:00:00`)
      return date.getDay()
    },
    checkRange(year) {
      let overstep = false
      if (year < this.minYear || year > this.maxYear) {
        uni.showToast({
          title: '日期超出范围啦~',
          icon: 'none'
        })
        overstep = true
      }
      return overstep
    },
    changeMonth(isAdd, current) {
      if (isAdd) {
        const month = this.swiper[current].month + 1
        const year = month > 12 ? this.swiper[current].year + 1 : this.swiper[current].year
        if (!this.checkRange(year)) {
          this.data.month = month > 12 ? 1 : month
          this.data.year = year
          this.changeData(isAdd, current)
        }
      } else {
        const month = this.swiper[current].month - 1
        const year = month < 1 ? this.swiper[current].year - 1 : this.swiper[current].year
        if (!this.checkRange(year)) {
          this.data.month = month < 1 ? 12 : month
          this.data.year = year
          this.changeData(isAdd, current)
        }
      }
    },
    changeYear(isAdd) {
      const year = isAdd ? this.year + 1 : this.year - 1
      if (!this.checkRange(year)) {
        this.year = year
        this.changeData()
      }
    },
    changeData(isAdd, current) {
      const y = current || current === 0 ? this.data.year : this.year
      const m = current || current === 0 ? this.data.month : this.month
      const days = this.getMonthDay(y, m)
      const daysArr = this.generateArray(1, days)
      const weekday = this.getWeekday(y, m)
      const weekdayArr = this.generateArray(1, weekday)
      this.data.daysArr = daysArr
      this.data.weekdayArr = weekdayArr
      const data = copyData(this.data)
      if (isAdd) this.swiper.push(data)
      else this.swiper.unshift(data)
      if (this.isChange && this.type == 1) {
        this.btnFix(true)
      }
    },
    dateClick: function(day, item) {
      day += 1
      if (!this.openDisAbled(item.year, item.month, day)) {
        this.day = day
        const date = `${item.year}-${item.month}-${day}`
        if (this.type == 1) {
          this.activeDate = date
        } else {
          const compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
          if (this.isStart || compare) {
            this.startDate = date
            this.startYear = item.year
            this.startMonth = item.month
            this.startDay = day
            this.endYear = 0
            this.endMonth = 0
            this.endDay = 0
            this.endDate = ''
            this.activeDate = ''
            this.isStart = false
          } else {
            this.endDate = date
            this.endYear = item.year
            this.endMonth = item.month
            this.endDay = day
            this.isStart = true
          }
        }
        if (!this.isFixed) {
          this.btnFix()
        }
      }
    },
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
      this.$emit('hide', {})
    },
    getWeekText(date) {
      date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`)
      const week = date.getDay()
      return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week]
    },
    btnFix(show) {
      if (!show) {
        this.hide()
      }
      if (this.type == 1) {
        const arr = this.activeDate.split('-')
        const year = this.isChange ? this.year : Number(arr[0])
        const month = this.isChange ? this.month : Number(arr[1])
        const day = this.isChange ? this.day : Number(arr[2])
        // 当前月有多少天
        const days = this.getMonthDay(year, month)
        const result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`
        const weekText = this.getWeekText(result)
        let isToday = false
        if (`${year}-${month}-${day}` == this.today) {
          // 今天
          isToday = true
        }
        const lunar = calendar.solar2lunar(year, month, day)
        this.$emit('change', {
          year: year,
          month: month,
          day: day,
          days: days,
          result: result,
          week: weekText,
          isToday: isToday,
          switch: show, // 是否是切换年月操作
          lunar: lunar
        })
      } else {
        if (!this.startDate || !this.endDate) return
        const startMonth = this.formatNum(this.startMonth)
        const startDay = this.formatNum(this.startDay)
        const startDate = `${this.startYear}-${startMonth}-${startDay}`
        const startWeek = this.getWeekText(startDate)
        const startLunar = calendar.solar2lunar(this.startYear, startMonth, startDay)

        const endMonth = this.formatNum(this.endMonth)
        const endDay = this.formatNum(this.endDay)
        const endDate = `${this.endYear}-${endMonth}-${endDay}`
        const endWeek = this.getWeekText(endDate)
        const endLunar = calendar.solar2lunar(this.endYear, endMonth, endDay)
        this.$emit('change', {
          startYear: this.startYear,
          startMonth: this.startMonth,
          startDay: this.startDay,
          startDate: startDate,
          startWeek: startWeek,
          startLunar: startLunar,
          endYear: this.endYear,
          endMonth: this.endMonth,
          endDay: this.endDay,
          endDate: endDate,
          endWeek: endWeek,
          endLunar: endLunar,
          inx: this.inx
        })
      }
    },
    ...mapMutations({
      setStatisticsCalendarShowInx: 'status/setStatisticsCalendarShowInx'
    })
  }
}
</script>

<style scoped lang="scss">
@font-face {
	font-family: 'tuiDateFont';
	src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA0AAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFRAAAABoAAAAci0/w50dERUYAAAUkAAAAHgAAAB4AKQANT1MvMgAAAaAAAABDAAAAVjxuSNNjbWFwAAAB+AAAAEoAAAFS5iPQt2dhc3AAAAUcAAAACAAAAAj//wADZ2x5ZgAAAlQAAAFHAAABvPf29TBoZWFkAAABMAAAADAAAAA2GMsN3WhoZWEAAAFgAAAAHQAAACQHjAOFaG10eAAAAeQAAAATAAAAFgzQAPJsb2NhAAACRAAAABAAAAAQAOoBSG1heHAAAAGAAAAAHgAAACABEwA3bmFtZQAAA5wAAAFJAAACiCnmEVVwb3N0AAAE6AAAADQAAABLUwjqHHjaY2BkYGAAYp5Gj5/x/DZfGbhZGEDg1tUn7+F00P/LzOuY9YFcDgYmkCgAa0gNlHjaY2BkYGBu+N/AEMPCAALM6xgYGVABCwBT4AMaAAAAeNpjYGRgYGBn0GZgYgABEMkFhAwM/8F8BgANaAFLAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ49ZG7438AQw9zA0AAUZgTJAQDrcAy8AHjaY2GAABYIDgLCBQx1AAcEAc8AeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMzxifcTx7+P8/kMUAYUkxS/6VVIXqAgNGNgY4lxGoB6QPBTAyDHsAADDkDYkAAAAAAAAAAAAAADQAagC2AN542m2QsU7DMBCG/Tt1bNPUiUnkSgiVtqKpxJAgVLVbeAa6MaK+B4JXgJWBjY21UtW5gpkdMTFX7dzApaJLhXU6n8+n//ttxtn458N79XJWZ8eMxS00C4wy9A1EP8PQncAlIQzS4WgsVtPpSmwzV3OFRqLetH5TSQMK939X61ptPZ2p2EAttNMLBRMrtschQblDeS34aY50cIkCzg/B2Y5C+VpyQxhFkRgu515O8jvU5mmPM2O0wJ5Z27vhX+yMsV437WvCdTM+GI40MgwKfuGammC0uURqeqFMfe9cxaJclkt5GMaB1hIR1VobOgpEiKq+sLZcIrJWhO3/Jw7qWlYj1Jf21FaCtmd5bevrlk28O/7A4spXTl4KTh9MTlqQ8PESBRstReic+sRj0Dni9fIqmNS/pXNWCvWOeYBmx5S9Bsn9Ah+5WtAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAO2MGiTIxMjMyMLIys7GmJeRmlmWZQ2pQ5OSORLaU0Mz2/FACDfwlbAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABgABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9K2rT97DaABNlwiuAAA=)
		format('woff');
	font-weight: normal;
	font-style: normal;
}

.tui-iconfont {
	font-family: 'tuiDateFont' !important;
	font-size: 36rpx;
	font-style: normal;
  /*#ifndef APP-NVUE*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  /*#endif*/
}

/*#ifndef APP-NVUE*/

.tui-font-check:before {
	content: '\e6e1';
}

.tui-font-arrowright:before {
	content: '\e600';
}

.tui-font-arrowleft:before {
	content: '\e601';
}
/*#endif*/

.tui-date-box {
	width: 750rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0 30rpx;
	background-color: #fff;
}

.tui-calendar-radius {
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	overflow: hidden;
}

.tui-date_time {
	padding: 0 16rpx;
	color: #333;
	font-size: 32rpx;
	line-height: 32rpx;
	font-weight: bold;
}

.tui-font-arrowleft {
	margin-right: 32rpx;
}

.tui-font-arrowright {
	margin-left: 32rpx;
}

.tui-date-header {
	width: 750rpx;
	display: flex;
  flex-direction: row;
	align-items: center;
  justify-content: center;
	background-color: #fff;
	position: relative;
	z-index: 2;
}

.tui-date-content {
	width: 750rpx;
	display: flex;
  flex-direction: row;
	flex-wrap: wrap;
	padding: 12rpx 0.5rpx;
  /*#ifndef APP-NVUE*/
	box-sizing: border-box;
  /*#endif*/
	background-color: #fff;
	position: relative;
}

.tui-flex-start {
  /*#ifndef APP-NVUE*/
	align-content: flex-start;
  /*#endif*/
}

.tui-bg-month {
  @include position(absolute,0,0,0,0);
	z-index: 1;
}

.tui-date {
  width: 107rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12rpx 0;
	overflow: hidden;
	position: relative;
	z-index: 2;
  border-radius:0;
}

.tui-date-pd_0 {
	padding: 0 !important;
}

.tui-start-date {
  border-radius:8rpx 0 0 8rpx;
}

.tui-end-date {
  border-radius:0 8rpx 8rpx 0;
}

.tui-date-text {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	border-radius: 50%;
}

.tui-btn-calendar {
	padding: 16rpx;
  /*#ifndef APP-NVUE*/
	box-sizing: border-box;
  /*#endif*/
	text-align: center;
	text-decoration: none;
}

.tui-opacity {
	opacity: 0.5;
}

.tui-bottom-popup {
	width: 750rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
  /*#ifndef APP-NVUE*/
	visibility: hidden;
  transition: all 0.3s ease-in-out;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  /*#endif*/
  background:#ffffff;
  border-radius:20rpx 20rpx 0 0;
	min-height: 20rpx;
}

.tui-popup-show {
	transform: translate3d(0, 0, 0);
  /*#ifndef APP-NVUE*/
	visibility: visible;
  /*#endif*/
}

.tui-popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9996;
	opacity: 0;
  /*#ifndef APP-NVUE*/
	visibility: hidden;
  transition: all 0.3s ease-in-out;
  /*#endif*/
}

.tui-mask-show {
	opacity: 1;
  /*#ifndef APP-NVUE*/
	visibility: visible;
  /*#endif*/
}

.tui-calendar-header {
	width: 750rpx;
	height: 80rpx;
	padding: 0 40rpx;
	display: flex;
  flex-direction: row;
	justify-content: space-between;
	align-items: center;
  /*#ifndef APP-NVUE*/
	box-sizing: border-box;
  /*#endif*/
	background-color: #fff;
	position: relative;
}

.tui-btn-calendar {
	padding: 16rpx;
  /*#ifndef APP-NVUE*/
	box-sizing: border-box;
  /*#endif*/
	text-align: center;
	text-decoration: none;
}

.tui-font-check {
	color: #fff;
	font-size: 54rpx;
	line-height: 54rpx;
}

.tui-custom-desc {
	width: 80rpx;
	transform: scale(0.8);
	transform-origin: center center;
	text-align: center;
}

.tui-lunar-unshow {
	position: absolute;
	left: 0;
	bottom: 8rpx;
	z-index: 2;
}

.tui-date-desc {
	width: 107rpx;
	position: absolute;
	left: 0;
	transform: scale(0.8);
	transform-origin: center center;
	text-align: center;
	bottom: 8rpx;
	z-index: 2;
}

.tui-calendar-op {
	width: 750rpx;
	background-color: #fff;
	padding: 0 42rpx 30rpx;
  /*#ifndef APP-NVUE*/
	box-sizing: border-box;
  /*#endif*/
}

.tui-calendar-result {
	height: 48rpx;
	transform: scale(0.9);
	transform-origin: center 100%;
}

</style>
